<template>
  <div>
    <!-- <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel
        key="1"
        header="This is panel header 1"
      >
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel
        key="2"
        header="This is panel header 2"
      >
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel
        key="3"
        header="This is panel header 3"
        collapsible="disabled"
      >
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse> -->
    <a-collapse v-model:activeKey="activeKey">

      <a-collapse-panel
        key="1"
        header="This is panel header 1"
      >
        <p>{{ text }}</p>
        <template #extra>设置</template>
      </a-collapse-panel>
      <a-collapse-panel
        key="2"
        header="This is panel header 2"
      >
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel
        key="3"
        header="This is panel header 3"
      >
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>

    {{ expandIconPosition }}

    <a-collapse
      v-model:activeKey="activeKey"
      :expand-icon-position="expandIconPosition"
      ghost
    >
      <a-collapse-panel
        key="1"
        header="This is panel header 1"
      >
        <p>{{ text }}</p>
        <template #extra>1</template>
      </a-collapse-panel>
      <a-collapse-panel
        key="2"
        header="This is panel header 2"
      >
        <p>{{ text }}</p>
        <template #extra>1</template>
      </a-collapse-panel>
      <a-collapse-panel
        key="3"
        header="This is panel header 3"
        collapsible="disabled"
      >
        <p>{{ text }}</p>
        <template #extra><span @click="handleClick" /></template>
      </a-collapse-panel>
    </a-collapse>
    <br />
    <span>Expand Icon Position:</span>
    <a-select v-model:value="expandIconPosition">
      <a-select-option value="left">left</a-select-option>
      <a-select-option value="right">right</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      activeKey: ['1'],
      text: '文字内容',

      isActive: false,
      expandIconPosition: 'right',
    }
  },
  created() { },
  mounted() { },
  methods: {
    handleClick(event) {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
